<template>
  <div class="answer-page">
    <el-dialog
      title="二维码和链接"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="4">二维码：</el-col>
        <el-col :span="18">
          <!-- <el-image style="width: 100px;" :src="qrCode" :preview-src-list="[qrCode]"></el-image> -->
          <vue-qrcode :value="answerLink" :options="{ size: 100 }"></vue-qrcode>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">链&nbsp;&nbsp;&nbsp;&nbsp;接：</el-col>
        <el-col :span="18">
          <el-row type="flex">
            <el-input size="mini" type="text" v-model="answerLink"/>
            <el-button style="margin-left: 10px" size="mini" @click="handleCopy">复制</el-button>
            <el-button size="mini" type="primary" @click="publish">前往</el-button>
          </el-row>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <!-- <el-button size="mini" type="primary" @click="onSure">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import VueQrcode from '@xkeshi/vue-qrcode'
export default {
  components: { VueQrcode },
  props: {
    dialogVisible: {
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
      answerLink: '',
      qrCode: ''
    }
  },
  methods: {
    // 从父组件获得信息调用
    getFromParentData(data) {
      this.qrCode = data.qrCode
      const url = 'https://jypt.kaibujiaoyu.com/h5/wx/index.html#/'
      this.answerLink = `${url}?id=${data.id}&openId=0&source=1&type=2`
    },
    handleCopy() {
      if (navigator.clipboard) {
          navigator.clipboard.writeText(this.answerLink).then(() => {
            this.$message.success('复制成功')
          })
      } else {
          const input = document.createElement('input')
          input.setAttribute('readonly', 'readonly')
          input.setAttribute('value', this.answerLink)
          document.body.appendChild(input)
          input.select()
          if (document.execCommand('copy')) {
            document.execCommand('copy')
            this.$message.success('复制成功')
          }
          document.body.removeChild(input)
      }
    },
    handleClose() {
      this.$emit('close', false)
    },
    publish() {
      window.open(this.answerLink)
    }
    // onSure() {
    //   this.$emit('sure', data)
    // }
  }
}
</script>
<style lang="scss" scoped>
.answer-page{
  .qrcodeAndlink{
    width: 100%;
    display: flex;
    .el-image{
      width: 100px;
    }
    // .link{
    //   width: calc(100% - 100px);
    // }
  }
}
</style>
